<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商城首页</title>
    <link rel="stylesheet" href="../css/iconfont.css">
    <link rel="stylesheet" href="../css/vant.index.css">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: #fff;
    }

    [v-cloak] {
        display: none;
    }

    #app,
    .home-box,
    .home-content {
        width: 100%;
        min-height: 100%;
    }

    .header {
        width: 95%;
        height: 3em;
        background: rgba(255, 255, 255, 0.849);
        padding: .45em .5em .5em .6em;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 999;
        display: none;
    }

    .header .search-box {
        /*height: 1.8em;*/
        text-align: center;
    }

    .header .search-box span {
        width: 80%;
        height: 50px;
        line-height: 2.5em;
        background: rgba(255, 255, 255, 0.1);
        display: inline-block;
        border-radius: 1.5em;
        font-size: 25px;
    }

    input {
        width: 80%;
        line-height: 2.5em;
        background: rgba(255, 255, 255, 0.1);
        display: inline-block;
        /*border-radius: 30px;*/
        border: none;
        text-align: center;
    }

    .home-content {
        padding-top: 63.2px;
    }
    /*   头部导航栏的样式*/

    .head {
        text-align: center;
        padding-bottom: 30px;
    }

    .head h3 {
        display: inline-block;
        font-size: 40px;
        color: salmon;
    }

    .head .head-searchBtn {
        display: inline-block;
        position: absolute;
        right: 10px;
        z-index: 999;
    }

    .head .head-searchBtn span {
        width: 50px;
        height: 50px;
    }

    .head .head-searchBtn .iconfont {
        width: 50px;
        font-size: 50px;
        color: rosybrown;
    }
    /**幻灯片样式
**/

    .swiper-box {
        width: 100%;
        height: 260px;
    }

    .van-swipe {
        width: 100%;
        height: 260px;
    }

    .swiper-box img {
        width: 98%;
        height: 250px;
        margin: 1%;
        float: left;
    }
    /*   购物列表的样式*/

    .shopping-center {
        width: 100%;
        height: 50px;
        text-align: center;
        box-shadow: 0 0 0.13333rem 0 hsla(0, 6%, 57.8%, .6);
    }

    .shopping-center ul li {
        width: 25%;
        height: 50px;
        float: left;
        padding-top: 10px;
        font-size: 20px;
    }

    .van-tab span {
        font-size: 20px;
    }
    /*     商品列表的样式*/

    .van-tab__pane {
        height: 100%;
    }

    .goodList {
        width: 100%;
        height: 100%;
    }

    .goodList ul {
        height: 100%;
    }

    .goodList ul li {
        width: 50%;
        height: 250px;
        float: left;
    }

    .goodList ul li a .goodImage {
        width: 80%;
        height: 200px;
        margin-left: 10%;
        margin-right: 10%;
    }

    .goodImage img {
        width: 100%;
        height: 200px;
    }

    .goodList span {
        display: inline-block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .goodList span:hover {
        overflow: visible;
    }

    .goodList p {
        display: block;
        float: left;
        font-size: 14px;
    }

    .goodList .price {
        margin-left: 20px;
    }

    .goodList .oriPrice {
        margin-right: 20px;
        float: right;
        text-decoration: line-through;
    }
    /*   底部导航栏的样式*/

    .nav-box {
        width: 100%;
        height: 50px;
        position: fixed;
        bottom: 0;
        left: 0;
        text-align: center;
        background-color: rgba(255, 255, 255, 0.849);
        box-shadow: 0 0 0.13333rem 0 rgba(224, 216, 216, 0.6);
        z-index: 999;
    }

    .nav-box ul {
        width: 100%;
        height: 100%;
    }

    .nav-box ul li {
        width: 25%;
        height: 100%;
        float: left;
        padding-top: 7px;
    }

    .nav-box ul li a {
        text-align: center;
    }

    .nav-box img {
        width: 15px;
        height: 15px;
    }

    .nav-box span {
        display: block;
    }

    .globalItem_action {
        position: fixed;
        right: 20px;
        bottom: 60px;
        width: 50px;
        height: 60px;
        /*background-color: red;*/
    }

    .globalItem_action .globaAction_item {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #000;
        text-align: center;
        margin-bottom: 10px;
        opacity: 0.5;
    }

    .globalItem_action .globaAction_item span {
        display: block;
        line-height: 50px;
        /*margin: auto;*/
    }

    .globalItem_action .globaAction_item span.iconfont.icon-emizhifeiji {
        font-size: 20px;
    }

    .iconfont {
        height: 20px;
        color: red;
    }
</style>

<body>
    <div id="app" v-cloak>
        <div class="home-box">
            <div class="header" id="header">
                <div class="search-box">
                    <span><input type="text" value="" placeholder="请输入搜索关键词" οnfocus="Inputselect();" id="selectinput">
                    </span>
                </div>
            </div>
            <div class="home-content">
                <!-- 这是头部 -->
                <div class="head">
                    <h3>GAMECORES</h3>
                    <div class="head-searchBtn"><span class="iconfont icon-sousuo1" onclick="searchWin();"></span></div>
                </div>

                <!--幻灯片的开始-->
                <div id="swiper-box">
                    <div class="swiper-box">
                        <van-swipe :autoplay="3000" indicator-color="white">
                            <van-swipe-item v-for="image in swiper_img">
                                <img :src="image" alt="">
                            </van-swipe-item>
                        </van-swipe>
                    </div>
                </div>
                <!--幻灯片结束-->
                <!-- 这是购物列表的开始 -->
                <div class="shopping-center">
                    <van-tabs>
                        <van-tab v-for="(index,count) in title" :title="index">
                            <div class="goodList" v-if="count==0">
                                <ul>
                                    <li v-for="goods in goodsLists[0]">
                                        <a v-on:click="toWareInfo(goods,goods.goodsid);">
                                            <div class="goodImage">
                                                <img :src="goods.url" alt="">
                                            </div>
                                            <div class="goodinfo">
                                                <span :title="goods.title">{{goods.title}}</span>
                                                <p class="price">￥{{goods.price}}</p>
                                                <p class="oriPrice">￥{{goods.oriPrice}}</p>
                                            </div>
                                        </a>
                                    </li>
                                    <div class="null" style="width: 100%; height:60px;display: block;float:left;">
                                        &nbsp;
                                    </div>
                                </ul>
                            </div>
                            <div class="goodList" v-if="count==1">
                                <ul>
                                    <li v-for="goods in goodsLists[1]">
                                        <a v-on:click="toWareInfo(goods,goods.goodsid);">
                                            <div class="goodImage">
                                                <img :src="goods.url" alt="">
                                            </div>
                                            <div class="goodinfo">
                                                <span>{{goods.title}}</span>
                                                <p class="price">￥{{goods.price}}</p>
                                                <p class="oriPrice">￥{{goods.oriPrice}}</p>
                                            </div>
                                        </a>
                                    </li>
                                    <div class="null" style="width: 100%; height:60px;display: block;float:left;">
                                        &nbsp;
                                    </div>
                                </ul>
                            </div>
                            <div class="goodList" v-if="count==2">
                                <ul>
                                    <li v-for="goods in goodsLists[2]">
                                        <a v-on:click="toWareInfo(goods,goods.goodsid);">
                                            <div class="goodImage">
                                                <img :src="goods.url" alt="">
                                            </div>
                                            <div class="goodinfo">
                                                <span :title="goods.title">{{goods.title}}</span>
                                                <p class="price">￥{{goods.price}}</p>
                                                <p class="oriPrice">￥{{goods.oriPrice}}</p>
                                            </div>
                                        </a>
                                    </li>
                                    <div class="null" style="width: 100%; height:60px;display: block;float:left;">
                                        &nbsp;
                                    </div>
                                </ul>
                            </div>
                            <div class="goodList" v-if="count==3">
                                <ul>
                                    <li v-for="goods in goodsLists[3]">
                                        <a v-on:click="toWareInfo(goods,goods.goodsid);">
                                            <div class="goodImage">
                                                <img :src="goods.url" alt="">
                                            </div>
                                            <div class="goodinfo">
                                                <span>{{goods.title}}</span>
                                                <p class="price">￥{{goods.price}}</p>
                                                <p class="oriPrice">￥{{goods.oriPrice}}</p>
                                            </div>
                                        </a>
                                    </li>
                                    <div class="blank_null" style="width: 100%; height:60px;display: block;float:left;">
                                        &nbsp;
                                    </div>
                                </ul>
                            </div>
                        </van-tab>
                    </van-tabs>
                </div>
                <!-- 这是购物列表的结束 -->
            </div>
        </div>
        <!-- 返回到顶部 start-->
        <div class="globalItem_action">
            <div class="globaAction_item" @click="GoBackHome">
                <span class="iconfont icon-emizhifeiji"></span>
            </div>
        </div>
        <!-- 返回到顶部 end-->
        <!-- 这是底部导航栏的开始 -->
        <div class="nav-box">
            <ul>
                <li>
                    <a href="">
                        <span class="iconfont icon-fanhuishouye"></span>
                        <span>Home</span>
                    </a>
                </li>

                <li>
                    <a href="cart.html">
                        <span class="iconfont icon-dianshangxitong"></span>
                        <span>Cart</span>
                    </a>

                </li>
                <li>
                    <a href="">
                        <span class="iconfont icon-drxx66"></span>
                        <span>order</span>
                    </a>
                </li>
                <li>
                    <a href="ShoppingCenter.html">
                        <span class="iconfont icon-wodexinxi"></span>
                        <span>My</span>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 这是底部导航栏的结束 -->
    </div>
</body>
<script src="../script/vue.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script src="../script/axios.min.js"></script>
<script src="../script/myscript.js"></script>
<script type="text/javascript" src="../script/SHA1.js"></script>
<script src="../script/vant.min.js"></script>
<script src="../script/local_db.js"></script>
<script>
    // $api.rmStorage('goodslist');
    var local_goodslist = $api.getStorage('goodslist');
    var list = [];
    if (local_goodslist == null) {
        var filter = {}
        var now = Date.now();
        var _AppId = $blt.getAppId();
        var _appKey = $blt.getAppKey();
        var appKey = SHA1(_AppId, "UZ", _appKey, "UZ" + now) + "." + now;
        axios.get('https://d.apicloud.com//mcm/api/goods?filter=' + JSON.stringify(filter), {
                headers: {
                    "X-APICloud-AppId": _AppId,
                    "X-APICloud-AppKey": appKey
                }
            })
            .then(function(response) {
                console.log(JSON.stringify(response));
                // alert(JSON.stringify(response));
                if (response.data && response.data.length) {
                    var sublist1 = [];
                    var sublist2 = [];
                    var sublist3 = [];
                    var sublist4 = [];
                    local_goodslist = response.data;
                    for (var i = 0; i < local_goodslist.length; i++) {
                        if (local_goodslist[i].classtype == '1') {
                            sublist1.push(local_goodslist[i]);
                        } else if (local_goodslist[i].classtype == '2') {
                            sublist2.push(local_goodslist[i]);
                        } else if (local_goodslist[i].classtype == '3') {
                            sublist3.push(local_goodslist[i]);
                        } else if (local_goodslist[i].classtype == '4') {
                            sublist4.push(local_goodslist[i]);
                        }
                    }
                    list.push(sublist1);
                    list.push(sublist2);
                    list.push(sublist3);
                    list.push(sublist4);
                    $api.setStorage('goodslist', list);
                } else {
                    for (var i = 0; i < 4; i++) {
                        list.push($lcdb.getgoods(i));
                    }
                }
            })
            .catch(function(error) {
                console.log(error);
                // alert(JSON.stringify(error));
                for (var i = 0; i < 4; i++) {
                    list.push($lcdb.getgoods(i));
                }
            });
    } else {
        list = $api.getStorage('goodslist');
        console.log("用的本地数据\n"+JSON.stringify(list));
        // alert("用的本地数据\n"+JSON.stringify(list));
    }
    // 获取本地数据
    var app = new Vue({
        el: '#app',
        data: {
            title: ['游戏', '手办', '主机', '其他'],
            goodsLists: list,
            swiper_img: ['https://image.gcores.com/b83e99d7-c1cc-4313-b3c5-cd05f606fc35.jpg',
                'https://image.gcores.com/1b2b462c-229f-49be-9b1c-d9521a580d8c.jpg',
                'https://image.gcores.com/b14b00bb-d114-4595-a19a-4b276753c294.jpg',
                'https://image.gcores.com/84793ffb-2773-4b8e-bd87-a9ed03d34e62.jpg'
            ]
        },
        methods: {
            getGoodsListFromAPiCloud: function(_index) {},
            // 这个是进入商品详情的方法
            toWareInfo: function(goods, id) {
                var str = goods;
                sessionStorage.setItem('wareInfo_id', JSON.stringify(goods));
                sessionStorage.setItem('Id', id)
                    // alert(goods);
                window.location.href = 'wareInfo.html';

            },
            GoBackHome: function() {
                window.location.href = '../index.html';
            },
        }
    });

    // 这个是主页的搜索框，但搜索功能没有设计
    function searchWin() {
        var div = document.getElementById("header");
        //alert(div.style.display);
        if (div.style.display == "inline-block")
            div.style.display = "none";
        else {
            div.style.display = "inline-block";
            alert('搜索功能闹别扭了，还未开发');
        }

    }
</script>


</html>
